/*
 * @Descripttion: 个人中心
 * @version: 1.0
 * @Company: 我们就是队
 * @Author: 王小辉
 * @Date: 2022-02-06 13:55:48
 */
import HeaderPage from '@/components/HeaderPage';
import { connect } from 'umi';
import { Card, Image, Form, Input, Button, Avatar } from 'antd';
import '../user/user.less';
import {
  SolutionOutlined,
  AudioOutlined,
  MessageOutlined,
  AlertOutlined,
  UserOutlined,
  PlusCircleOutlined,
} from '@ant-design/icons';
import { useEffect, useState } from 'react';

const User = ({ user, dispatch }) => {
  const { weatherData } = user;
  console.log(weatherData, 'weatherData');
  useEffect(() => {
    getWeather();
  }, []);
  const getWeather = () => {
    dispatch({
      type: 'user/getWeather',
      payload: '广州',
    });
  };

  const userMenu = [
    { id: 0, icon: <SolutionOutlined />, name: '修改个人信息' },
    { id: 1, icon: <MessageOutlined />, name: '个人消息汇总' },
    { id: 2, icon: <AudioOutlined />, name: '求助信息一览' },
    { id: 3, icon: <AlertOutlined />, name: '救援信息一览' },
  ];
  const [menuPage, setMenuPage] = useState(0);
  const menuHandel = (id: number) => {
    setMenuPage(id);
  };

  return (
    <div className="user_page">
      <HeaderPage></HeaderPage>
      <div className="personal_center_page">
        <Card style={{ width: 260 }} className="personal_center_left">
          <Image
            width={120}
            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
          />
          <div className="user_data">
            <p>用户名：王小辉</p>
            <p>手机号：18538777301</p>
          </div>
          <ul>
            {userMenu.map((item) => {
              return (
                <li
                  className={item.id == menuPage ? 'li_selected' : ''}
                  key={item.id}
                  onClick={() => {
                    menuHandel(item.id);
                  }}
                >
                  {item.icon}
                  {item.name}
                </li>
              );
            })}
          </ul>
        </Card>
        <div className="personal_center_right">
          <div className="right_top">
            <div className="weather_top">
              <span>你所在城市未来五天的天气情况</span>
              <span>{weatherData.city}市</span>
              <span>{weatherData.wendu}°C</span>
            </div>
            <div className="weather_bottom">
              {weatherData.forecast &&
                weatherData.forecast.map((item, index) => {
                  return (
                    <div className="weather_box" key={index}>
                      <span>{item.data}</span>
                      <span>{item.type}</span>
                      <span>{item.high}</span>
                      <span>{item.low}</span>
                      <span>{item.fengxiang}</span>
                      <span>{item.fengli}</span>
                    </div>
                  );
                })}
            </div>
            <div className="weather_ganmao">{weatherData.ganmao}</div>
          </div>
          <Card style={{ width: 900, marginLeft: '30px' }}>
            {menuPage === 0 ? (
              <div className="personal_data">
                <h2>个人资料</h2>
                <div className="personal_data_box">
                  <div className="personal_data_left">
                    <Form
                      name="basic"
                      labelCol={{ span: 3 }}
                      wrapperCol={{ span: 21 }}
                    >
                      <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: '请输入用户名' }]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item wrapperCol={{ offset: 3, span: 21 }}>
                        <Button type="primary" htmlType="submit">
                          保存修改
                        </Button>
                      </Form.Item>
                    </Form>
                  </div>
                  <div className="personal_data_right">
                    <div className="head_portrait">
                      <Avatar size={90} icon={<UserOutlined />} />
                      <div className="head_portrait_popu"></div>
                      <div className="head_portrait_hover">
                        <PlusCircleOutlined />
                        <span>点击修改头像</span>
                      </div>
                    </div>
                    <span>我的头像</span>
                    <span>支持 jpg、png、jpeg 格式大小 5M 以内的图片</span>
                  </div>
                </div>
              </div>
            ) : menuPage === 1 ? (
              <div>个人消息汇总</div>
            ) : menuPage === 2 ? (
              <div>求助信息一览</div>
            ) : menuPage === 3 ? (
              <div>救援信息一览</div>
            ) : null}
          </Card>
        </div>
      </div>
    </div>
  );
};
const mapStateProps = ({ user }) => {
  return {
    user,
  };
};
export default connect(mapStateProps)(User);
